<template>
  <div class="background-image" :style="`background-color: ${bgColor}`">
    <div class="topdiv" :style="`background:${jbColor}`"></div>
    <img :src="url" alt="背景图片" class="image" />
    <div class="content" >
      <div class="description-container">
        <p class="description">{{ description }}</p>
      </div>
      <div class="other-description">
        <ul>
          <li>1. 城南花已开</li>
          <li>2. 探故知</li>
          <li>3. 青瓷</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="ImageCard">
import { ref, onMounted } from "vue";
import ColorExtractor from "@/tools/ColorExtractor";

// 接收属性
const props = defineProps(['title', 'url', 'description']);

// 定义 ref 存储背景色
const bgColor = ref('');
const jbColor = ref('');

// 提取颜色的异步函数
const extractColor = async () => {
  try {
    const color = await ColorExtractor.getDominantColor(props.url);
    bgColor.value = `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
    jbColor.value = `linear-gradient(to bottom, rgba(${color[0]}, ${color[1]}, ${color[2]}, 0), rgba(${color[0]}, ${color[1]}, ${color[2]}, 1))`;
  } catch (error) {
    console.error(error);
  }
};

// 在组件挂载时调用 extractColor
onMounted(() => {
  extractColor();
});
</script>

<style scoped lang="scss">
.background-image {
  position: relative;
  border-radius: 15px;
  aspect-ratio: 1 / 1.25;
  width: 90%;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  color: rgb(240, 243, 246);
  cursor: pointer;
  .topdiv {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 75%;
    display: none;
  }

  .image {
    height: 75%;
    width: 100%;
  }

  .title {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 18px;
  }

  .content {
    display: flex;
    transition: transform 0.3s ease;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    .description-container {
      overflow: hidden;
      text-align: left;
      font-size: 15px;
      p {
        margin-block-start: 0;
        margin-inline-start: 10px;
        margin-inline-end: 10px;
      }
    }
    .other-description {
      font-size: 12px;
      display: none;

      ul {
        list-style: none;
        padding-inline-start: 12px;
        margin-block-start: 0;
        li{
          text-align: left;
          padding-top: 5px;
        }
      }
    }
  }

  &:hover{
    .content {
      transform: translateY(-60px); /* 鼠标悬停时上移 */
    }
    .topdiv {
      display: block;
    }
    .other-description{
      display: block;
    }
  }
}
</style>
